@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@include classNameConnect(card) {
  box-sizing: border-box;
  border: $--border-default;
  border-radius: $--border-radius-default;
  background-color: $--color-white;
  font-size: $--font-size-default;
  transition: box-shadow 0.3s, transform 0.3s;

  &:hover,
  &:focus,
  &:active {
    box-shadow: $--card-box-shadow;
    border-color: mix($--color-white, $--border-color-default, 20%);
  }
  @include b(no-hover) {
    &:hover,
    &:focus,
    &:active {
      box-shadow: none;
      border: $--border-default;
    }
  }
  @include b(no-border) {
    border: none;
  }
  @include b(no-elevate) {
    &:hover,
    &:focus,
    &:active {
      transform: translateY(-1.5%);
    }
  }

  @include el(header) {
    padding: $--card-padding-vertical $--card-padding-horizontal;
    border-bottom: $--border-default;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    font-size: $--font-size-title;
    font-weight: 600;
    @include clear-float;
  }
  @include el(header-title) {
    color: $--color-text-title;
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    @include utils-ellipsis();
  }
  @include el(header-extra) {
    box-sizing: border-box;
    float: right;
    font-weight: normal;
  }

  @include el(body) {
    padding: $--card-padding-vertical $--card-padding-horizontal;
  }
  @include el(footer) {
    padding: $--card-padding-vertical $--card-padding-horizontal;
    border-top: $--border-default;
  }
}
